<template>
    <div style="margin-top: 15px;" id="app">
        <el-input  placeholder="请输入内容" v-model="input4" class="input-with-select">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="编号" value="1"></el-option>
                <el-option label="姓名" value="2"></el-option>
                <el-option label="日期" value="3"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" v-on:click="attendanceFind(input4)" >查询</el-button>
        </el-input>
        <el-table
                v-loading="loading"
                :data="tableData"
                @selection-change="handleSelectionChange"
                style="width: 100%">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="编号"
                    sortable
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="signInDate"
                    label="签到日期"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="signInTime"
                    label="签到时间"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="签到状态"
                    width="150">
            </el-table-column>
            <el-table-column
                    label="审核"
                    width="100">
            </el-table-column>
            <el-table-column align="right" width="80">
                <template slot="header">
                    <el-button type="primary" @click="save=true" size="mini" plain>添加</el-button>
                </template>
            </el-table-column>
            <el-table-column align="right" width="180">
                <template slot="header">
                    <el-button type="primary" @click="setExcel=true" size="mini" plain>导出为excel文件</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" plain @click="edit=true,getForm(scope.row.id)" v-if="scope.row">修改</el-button>
                    <el-button size="mini" type="danger" plain @click="deleteAttendance(scope.row)" v-if="scope.row">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin: 15px 0px;"
                prev-text="上一页" next-text="下一页" background
                layout="prev, pager, next, sizes, jumper, total"
                :page-sizes="[5,10,20,40]"
                :page-size="pageSize"
                :total="total"
                :current-page="pageNow"
                @current-change="findPage"
                @size-change="findSize">
        </el-pagination>
        <el-dialog title="考勤信息列表" :visible.sync="list" width="80%">
            <el-table
                    :data="findList"
                    style="width: 100%;">
                <el-table-column
                        prop="id"
                        label="编号"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="signInDate"
                        label="签到日期"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="signInTime"
                        label="签到时间"
                        width="90">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="签到状态"
                        width="90">
                </el-table-column>
                <el-table-column
                        label="审核"
                        width="90">
                </el-table-column>
                <el-table-column
                        label="修改"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="warning" plain @click="edit=true,getForm(scope.row.id)" v-if="scope.row">修改</el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        label="删除"
                        width="100">
                    <template slot-scope="scope">
                        <el-button type="danger" plain @click="deleteAttendance(scope.row)" v-if="scope.row">删除</el-button>
                    </template >
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
            <el-button @click="list = false">确定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="修改考勤信息" :visible.sync="edit" width="30%">
            <el-form  ref="editForm"  label-width="80px":model="eform" :rules="editRules">
                <el-form-item label="编号">
                    <el-input v-model="eform.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="eform.name"></el-input>
                </el-form-item>
                <el-form-item label="签到日期" prop="signInDate" >
                    <el-date-picker v-model="eform.signInDate" type="date" placeholder="选择日期":picker-options="pickerOptions" style="width:100%;" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="签到时间" prop="signInTime" >
                    <el-time-picker v-model="eform.signInTime" :picker-options="{selectableRange: '07:00:00 - 21:59:59'}"  style="width:100%;" placeholder="选择时间"></el-time-picker>
                </el-form-item>
                <el-form-item label="签到状态">
                    <el-select v-model="eform.status" placeholder="签到状态">
                        <el-option label="打卡成功" value="打卡成功"></el-option>
                        <el-option label="打卡失败" value="打卡失败"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="edit = false">取 消</el-button>
                 <el-button type="primary" @click="edit = false,updateAttendance('editForm')">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="添加考勤信息" :visible.sync="save" width="30%">
            <el-form  ref="saveForm"  label-width="80px" :model="saveForm" :rules="saveRules">
                <el-form-item label="编号" prop="id">
                    <el-input v-model="saveForm.id" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="saveForm.name"></el-input>
                </el-form-item>
                <el-form-item label="签到日期" prop="signInDate" >
                    <el-date-picker v-model="saveForm.signInDate" type="date" placeholder="选择日期":picker-options="pickerOptions" style="width:100%;" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
                <el-form-item label="签到时间" prop="signInTime" >
                    <el-time-picker v-model="saveForm.signInTime" :picker-options="{selectableRange: '00:00:00 - 23:59:59'}"  style="width:100%;" placeholder="选择时间" value-format="HH:mm:ss"></el-time-picker>
                </el-form-item>
                <el-form-item label="签到状态" prop="state" >
                    <el-select v-model="saveForm.status" placeholder="签到状态">
                        <el-option label="打卡成功" value="打卡成功"></el-option>
                        <el-option label="打卡失败" value="打卡失败"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="save = false">取 消</el-button>
            <el-button type="primary" @click="save = false,saveAttendance()">确 定</el-button>
          </span>
        </el-dialog>
        <el-dialog title="导出为excel文件" :visible.sync="setExcel" width="30%">
            <el-form ref="form"  label-width="120px">
                <el-form-item label="导出文件夹路径">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="setExcel = false">取 消</el-button>
            <el-button type="primary" @click="setExcel = false,excel(form.path)">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    var list = [];

    export default {
        methods:{

            saveAttendance(){
                const _this = this
                console.log(_this.saveForm)
                this.$http.post("attendance/save",_this.saveForm).then(function(resp){
                    if(resp.data.code==2000){
                        _this.$message.success('添加成功')
                        location.reload();
                    }
                })



            },
            excel(path){
                const _this = this
                path=path+"/attendance.xls"
                console.log(path)
                this.$http.post("attendance/exportExcel",path).then(function(resp){
                    console.log(resp.data)
                    if(resp.data.code!=2000){
                        _this.$message.error(resp.data.msg);
                    }else{
                        _this.$message.success("导出成功");
                    }
                })
            },
            attendanceFind(input){
                const _this = this
                if(input!==null&&input!==''&&this.select=="1"){
                    this.$http.post("attendance/findOne",input).then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="2"){
                    this.$http.post("attendance/findByName",input).then(function(resp){
                        console.log(resp.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="3") {
                    this.$http.post("attendance/findByDate", input).then(function (resp) {
                        console.log(resp.data);
                        _this.tableData = resp.data.data
                    })
                }else{
                    this.$http.post("attendance/findAll").then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }
            },
            updateAttendance(fromName){
                this.eform.signInTime=(String)(this.eform.signInTime.getHours())+':'
                    +(String)(this.eform.signInTime.getMinutes())
                const _this = this
                this.$refs[fromName].validate(valid => {
                    if (valid) {
                        console.log(this.eform);
                        this.$http.post("attendance/update",this.eform).then(function(resp){
                            if (resp.data.code==2000)  _this.$message.success("修改成功")

                            location.reload();

                        });
                    } else {
                        this.$message.error("信息填写错误")
                    }
                })
            },
            deleteAttendance(row){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post("attendance/delete",row.id)
                    location.reload();
                    this.$message({
                            type: 'success',
                            message: '删除成功!'
                        }
                    );
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
                const _this = this
                this.$http.post("attendance/findLastId").then(function(resp){
                    _this.saveForm.id=resp.data.data+1
                })
            },

            findPage(page){
                console.log("当前页数："+page);
                this.pageNow=page;
                this.findAllTableDataByPage();
            },
            findSize(size){
                console.log("当前页面记录条数："+size);
                this.pageSize=size;
                this.findAllTableDataByPage();
            },
            findAllTableDataByPage(){
                this.$http.get("attendance/findByPage?pageNow="+this.pageNow+ "&pageSize=" + this.pageSize).then((res)=>{
                    // console.log(res.data);
                    this.tableData=res.data.attendances;
                    this.total=res.data.total;
                });
            },
            handleSelectionChange(val){
                console.log("handleSelectionChange--",val)
                this.tableChecked=val
            },

            attendanceFind(input){
                const _this = this
                if(input!==null&&input!==''&&this.select=="1"){
                    this.$http.post("attendance/findOne",input).then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="2"){
                    this.$http.post("attendance/findByName",input).then(function(resp){
                        console.log(resp.data);
                        _this.tableData=resp.data.data
                    })
                }else if(input!==null&&input!==''&&this.select=="3") {
                    this.$http.post("attendance/findByData", input).then(function (resp) {
                        console.log(resp.data);
                        _this.tableData = resp.data.data
                    })
                }
                else{
                    this.$http.post("attendance/findAll").then(function(resp){
                        console.log(resp.data.data);
                        _this.tableData=resp.data.data
                    })
                }
            },

            getForm(id){
                const _this = this
                this.$http.post("attendance/findOne", id).then(function (resp) {
                    _this.eform = resp.data.data[0]

                })
            },
        },

        data() {

            let num = /^(0|\+?[1-9][0-9]*)$/;
            let isNum = (rule, value, callback) => {
                if (!num.test(value)) {
                    return callback(new Error('格式错误'))
                } else {
                    callback()
                }
            };
            let percent = /^(?:[1-9]?\d|100)$/;
            let isPercent = (rule, value, callback) => {
                if (!percent.test(value)) {
                    return callback(new Error('请输入0-100的整数'))
                } else {
                    callback()
                }
            };
            var list=[];
            for(let i=0;i<20;i++){
                list[i]={
                    value: null,
                    label: null,
                }
            }
            const _this = this
            return {
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                setExcel:false,
                getExcel:false,
                add:false,
                loading: false,
                total:0,//总页数，从后台查询
                pageNow:1,//当前页数，默认为1
                pageSize:20,//当前页显示的数据条数，默认为20
                findList:null,
                list:false,
                input4:null,
                select: '请选择',
                tableData: null,
                edit:false,
                save:false,
                form:[
                    {
                        path:'',
                    }
                ],
                eform:{
                    id:'',
                    name:'',
                    signInDate:'',
                    signInTime:'',
                    state:'',
                },
                saveForm:{
                    id:'',
                    name:'',
                    signInDate:'',
                    signInTime:'',
                    state:'',
                },
                saveRules:{

                    name:[
                        //必填项
                        { required: true, message: '请填写姓名', trigger: 'blur' },
                        { min:2,max:20, message: '姓名在 2 ~ 20 个字符', trigger: 'blur' },
                    ],

                },

                editRules:{
                    name:[
                        //必填项
                        { required: true, message: '请填写姓名', trigger: 'blur' },
                        { min:2,max:20, message: '姓名在 2 ~ 20 个字符', trigger: 'blur' },
                    ],


                }
            }
        },
        created(){
            const _this = this
            this.$http.post("attendance/findLastId").then(function(resp){
                _this.saveForm.id=resp.data.data+1
            })
            this.$http.post("attendance/findList",window.sessionStorage.getItem("id")).then(function(resp){
                _this.tableData=resp.data.data
            })
        }
    }
</script>

<style>
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .page{
        float: right;
    }
</style>
